import { useEffect } from 'react'
import { Chart } from '@antv/g2'
import { getSimpleData } from '@/api/echarts'

export default function DataV () {
  const initDataV = async () => {
    const res = await getSimpleData()

    // 准备数据
    // const data = [
    //   { genre: 'Sports', sold: 275 },
    //   { genre: 'Strategy', sold: 115 },
    //   { genre: 'Action', sold: 120 },
    //   { genre: 'Shooter', sold: 350 },
    //   { genre: 'Other', sold: 150 }
    // ]

    // 初始化图表实例
    const chart = new Chart({
      container: 'container'
    })

    // 声明可视化
    chart
      .interval() // 创建一个 Interval 标记
      .data(res.data) // 绑定数据
      .encode('x', 'name') // 编码 x 通道
      .encode('y', 'value') // 编码 y 通道
      .axis('x', { title: '公司' })
      .axis('y', { title: '销量' }) // 隐藏 y 方向坐标轴
    // 渲染可视化
    chart.render()
  }

  useEffect(() => {
    initDataV()
  }, [])

  //   const dataVRef = useRef<HTMLDivElement | null>(null)

  return <div id='container' style={{ width: '80%', height: 600 }}></div>
}
